<!-- 物联网管理-能耗管理-每日用电 -->
<template>
  <ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
    <div class="JNPF-common-layout">
        <div class="JNPF-common-layout-center">

            <el-row class="JNPF-common-search-box" :gutter="16">
                <el-form @submit.native.prevent>
                     <el-col :span="6">
                        <el-form-item label="日期">
                           <el-date-picker v-model="listQuery.qyerydate" type="date" placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :span="6">
                        <!-- <el-form-item label="所属校区"> -->
                        <el-select v-model="listQuery.fcustomno" placeholder="请选择校区"
                            :disabled="$store.getters.userInfo.manufacturer">
                            <el-option
                            v-for="item in options1"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        <!-- </el-form-item> -->
                    </el-col>

                    <el-col :span="6">
                        <!-- <el-form-item label="所属校区"> -->
                        <el-select v-model="listQuery.fcustomno" placeholder="请选择楼"
                            :disabled="$store.getters.userInfo.manufacturer">
                            <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        <!-- </el-form-item> -->
                    </el-col>

                    <el-col :span="6">
                        <el-form-item label="">
                            <el-button type="primary" icon="el-icon-search">查询</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
     
        <div class="JNPF-common-search-box">
         <JNPF-table :data="list" border v-loading="loading">
          <el-table-column prop="FAREA" label="校区"></el-table-column>
          <el-table-column prop="F01" label="当天"></el-table-column>
          <el-table-column prop="F02" label="占比" ></el-table-column>
          <el-table-column prop="F03" label="环比"></el-table-column>
          <el-table-column prop="F04" label="环比率"> </el-table-column>
          <el-table-column prop="F05" label="同比"> </el-table-column>
          <el-table-column prop="F06" label="同比率"> </el-table-column>
         </JNPF-table>
        </div>

            <div class="JNPF-common-layout-main JNPF-flex-main">
                <div id="chart" style="width:100%;height:250px;margin-top:15px;"></div>
            </div>

        </div>
    </div>

  </ul>
</template>


<script>
    import jnpf from "@/utils/jnpf"
    import * as echarts from 'echarts';
    export default {
        data() {
            return {
                listQuery: {
                    qyerydate: new Date(),
                },
                chart: null,
                list:[{FAREA:"奉贤校区",F01:37.233,F02:0,F03:12.445,F04:"199.18%",F05:0.731,F06:"93.43"},
                      {FAREA:"第一教学楼",F01:27.133,F02:0,F03:12.445,F04:"199.18%",F05:0.731,F06:"59.12"},
                      {FAREA:"第一教学楼",F01:17.103,F02:0,F03:11.445,F04:"136.18%",F05:0.663,F06:"68.43"},
                      ],
                //所属校区选择数据
                options1: [{
                value: '10',
                label: '徐汇桂林路校区'
                }, {
                value: '20',
                label: '奉贤海湾校区'
                }],

                //所属教学楼选择数据
                options2: [{
                value: '20E01',
                label: '第一教学楼'
                }, {
                value: '20E02',
                label: '第二教学楼'
                }, {
                value: '20N01',
                label: '第一实验楼'
                }, {
                value: '20N02',
                label: '第二实验楼'
                }],
                schoole:true,
                building:false,
                classroom:false,
                option: {
                    title: {
                        text: '奉贤校区',
                        textStyle: {
                            fontSize: 16,
                            fontWeight: 900,
                            color: '#333'
                        }
                    },
                    grid: {
                        x: 80,
                        y: 50,
                        x2: 50,
                        y2: 60,
                        borderWidth: 0
                    },
                    // legend: {
                    //   data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎'],
                    //   top : '55%',
                    //   orient: 'vertical',
                    //   textStyle:{//图例文字的样式
                    //     color:'#dbdbdb' 
                    //   }
                    // },
                    tooltip: {
                        trigger: 'axis',
                        // formatter:function(){
                        //   return '整天数据'+"<br>"+'交易'
                        // }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: ['2', '4', '6', '8', '10',
                               '12', '14', '16', '18', '20', '22'],
                        axisLine: {
                            show: false, //是否显示x轴
                            lineStyle: {
                                // color: '#dbdbdb', // y坐标轴的轴线颜色
                                // width: 1, //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        axisTick: {
                            show: false, //是否显示刻度
                        },
                        // X轴的字体样式
                        axisLabel: {
                            show: true, //这行代码控制着坐标轴y轴的文字是否显示
                            textStyle: {
                                color: '#666', //X轴上的字体颜色
                                fontSize: '12', // X轴字体大小

                            }
                        },
                    },
                    yAxis: {
                        type: 'value',
                        // y轴的颜色和宽度
                        axisLine: {
                            show: false, //是否显示y轴
                            lineStyle: {
                                // color: '#000', // y坐标轴的轴线颜色
                                // width: 1, //这里是坐标轴的宽度,可以去掉
                            }
                        },
                        axisTick: {
                            show: false, //是否显示刻度
                        },
                        // y轴的字体样式
                        axisLabel: {
                            show: true, //这行代码控制着坐标轴y轴的文字是否显示
                            textStyle: {
                                color: '#666', //y轴上的字体颜色
                                fontSize: '12' // y轴字体大小
                            }
                        },
                    },
                    series: [{
                        data: [130, 231, 332, 535, 438, 336, 237 ,434,233,332,530],
                        type: 'line',
                        radius: '100%',
                        center: ['100%', '50%'],
                        areaStyle: {},
                        smooth: true,
                        areaStyle: {
                            color: '#d0e2f3'
                        },
                        itemStyle: {
                            normal: {
                                color: '#1890FF', //改变折线点的颜色
                                lineStyle: {
                                    color: '#1890FF' //改变折线颜色
                                }
                            }
                        },
                        stack: '总量',
                    }]
                }
            };
        },
        mounted() {
            this.initChart()
        },
        methods: {
            initChart() {
                this.chart = echarts.init(document.getElementById('chart'))
                this.chart.setOption(this.option);
                window.onresize = this.chart.resize()
            },
            handleCurrentChange(){
                console.log(1)
                this.schoole=false;
                this.building=true;
                this.classroom=false;
            },
            handleCurrentChange2(){
                this.schoole=false;
                this.building=false;
                this.classroom=true;
            },
            retnview(){
                this.schoole=true;
                this.building=false;
                this.classroom=false;
            }
        },
    };
</script>